/* every thing about code highlight*/
pre {
}

pre code {
    font-family: monospace;
    display: block;
    padding: 0 20px;
    color: #a9bcbc;
    line-height: 1.4em;
    font-size: 1.2em;
    overflow-x: auto;
    white-space: pre;
    border-radius: 10px;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
}

/*pre code::-webkit-scrollbar {*/
/*    width: 5px;*/
/*    height: 5px;*/
/*}*/
/**/
/*pre code::-webkit-scrollbar-thumb {*/
/*    height: 30px;*/
/*    background-color: #999;*/
/*    -webkit-border-radius: 7px;*/
/*    outline: 2px solid #fff;*/
/*    outline-offset: -2px;*/
/*    border: 2px solid #fff;*/
/*}*/
/**/
/*pre code::-webkit-scrollbar-track-piece {*/
/*    background-color: #fff;*/
/*    -webkit-border-radius: 3px;*/
/*}*/

pre code .keyword {
    color: #e73289;
}
pre code .type {
    color: #8281ca;
}
pre code .call {
    color: #348fe5;
}
pre code .property {
    color: #21ab9d;
}
pre code .number {
    color: #db6f57;
}
pre code .string {
    color: #fa641e;
}
pre code .comment {
    color: #6b8a94;
}
pre code .dotAccess {
    color: #92b300;
}
pre code .preprocessing {
    color: #b68a00;
}

.content pre,
.item-list pre {
    padding: 10px;
}

.content pre code,
.item-list pre code {
    display: block;
    background-color: black;
    padding: 15px 12px;
    border-radius: 8px;
    color: #a9bcbc;
    line-height: 1.4em;
    font-size: 12px;
    overflow-x: auto;
    white-space: pre;
    font-family: 'Fira Code', Menlo, Monaco, Consolas, Courier New, monospace, SF Mono, Consolas, Courier New, monospace, Helvetica, Arial;
    -webkit-overflow-scrolling: touch;
}

.content pre code .highlight,
.item-list pre code .highlight {
    display: inline-block;
    padding: 0 4px 2px 4px;
    border: 1px solid #546AFF;
    border-radius: 5px;
    background-color: #1A1721;
    margin-left: -5px;
}

.hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    color: #383a42;
    background: #fafafa;
}

.hljs-comment,
.hljs-quote {
    /*    color: #a0a1a7;*/
    color: #998;
    font-style: italic;
}

.hljs-doctag,
.hljs-keyword,
.hljs-formula {
    color: #a626a4;
}

.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst {
    color: #e45649;
}

.hljs-literal {
    color: #0184bb;
}

.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta-string {
    color: #50a14f;
}

.hljs-built_in,
.hljs-class .hljs-title {
    color: #c18401;
}

.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number {
    color: #986801;
}

.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title {
    color: #4078f2;
}

.hljs-emphasis {
    font-style: italic;
}

.hljs-strong {
    font-weight: bold;
}

.hljs-link {
    text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
    .hljs {
        display: block;
        overflow-x: auto;
        padding: 0.5em;
        color: #abb2bf;
        background: #282c34;
    }

    .hljs-comment,
    .hljs-quote {
        color: #5c6370;
        font-style: italic;
    }

    .hljs-doctag,
    .hljs-keyword,
    .hljs-formula {
        color: #c678dd;
    }

    .hljs-section,
    .hljs-name,
    .hljs-selector-tag,
    .hljs-deletion,
    .hljs-subst {
        color: #e06c75;
    }

    .hljs-literal {
        color: #56b6c2;
    }

    .hljs-string,
    .hljs-regexp,
    .hljs-addition,
    .hljs-attribute,
    .hljs-meta-string {
        color: #98c379;
    }

    .hljs-built_in,
    .hljs-class .hljs-title {
        color: #e6c07b;
    }

    .hljs-attr,
    .hljs-variable,
    .hljs-template-variable,
    .hljs-type,
    .hljs-selector-class,
    .hljs-selector-attr,
    .hljs-selector-pseudo,
    .hljs-number {
        color: #d19a66;
    }

    .hljs-symbol,
    .hljs-bullet,
    .hljs-link,
    .hljs-meta,
    .hljs-selector-id,
    .hljs-title {
        color: #61aeee;
    }

    .hljs-emphasis {
        font-style: italic;
    }

    .hljs-strong {
        font-weight: bold;
    }

    .hljs-link {
        text-decoration: underline;
    }


    .content pre code {
        background-color: #1a1a1a;
    }
}
